<%--
  Created by IntelliJ IDEA.
  User: Chokeremy
  Date: 2023/7/1
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>供应商列表</title>
    <script src="js/vue.js"></script>
    <script src="elementui/index.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
</head>
<body>
<h1>供应商管理</h1>
<div id="app">
    <div class="tb_header" style="display: flex; align-items: center; margin-bottom: 20px">
        <el-button type="primary" icon="el-icon-circle-plus" style="margin-right: 15px;"
                   @click="Add()">新增供应商
        </el-button>
    </div>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="supplierId"
                    label="供应商编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="供应商名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="contactPerson"
                    label="联系人"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="contactNumber"
                    label="联系电话"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="电子邮箱"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="联系地址">
            </el-table-column>
            <el-table-column label="修改" width="60">
                <template scope="curScope">
                    <el-button type="primary" icon="el-icon-edit" circle
                               @click="Edit(curScope.row.supplierId)"></el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除" width="60">
                <template scope="curScope">
                    <el-button type="danger" icon="el-icon-delete" circle
                               @click.native="Del(curScope.row.supplierId)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="24">
                <div style="padding-top: 20px;">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 50, 100]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </template>
</div>
</body>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            tableData: [],
            currentPage: 1,
            pagesize: 10,
            total: 0,
            showSuccessAlert: false,
            showErrorAlert: false,
            input: ''
        },
        mounted() {
            this.getSupplierList();
        },
        methods: {
            getSupplierList() {
                $.ajax({
                    url: 'Supplier_infoServlet',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        pageIndex: this.currentPage,
                        pageSize: this.pagesize,
                        search: this.input
                    },
                    success: (res) => {
                        this.tableData = res.list;
                        this.total = res.pageCount;
                        console.log(res)
                    }
                })
            },
            Add() {
                parent.vue.iframeUrl = 'supplieradd.jsp';
            },
            Edit(id) {
                parent.vue.iframeUrl = 'supplieredit.jsp?supplierId=' + id;
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
                this.getSupplierList();
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
                this.getSupplierList();
            },
            Del(id) {
                this.$confirm('您是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    $.ajax({
                        url: 'Supplier_infoServlet?tag=del',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            supplierId: id
                        },
                        success: (res) => {
                            if (res) {
                                this.$alert('删除成功', '操作提示：', {
                                    confirmButtonText: '知道了啦',
                                });
                                this.getSupplierList();
                            } else {
                                this.$alert('删除失败', '操作提示：', {
                                    confirmButtonText: '知道了啦',
                                });
                            }
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</html>
